<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>Grid selection</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/kendo.common.css" rel="stylesheet"/>
        <link href="../../source/styles/kendo.kendo.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/kendo.core.js"></script>
        <script src="../../source/js/kendo.data.js"></script>
        <script src="../../source/js/kendo.pageable.js"></script>
        <script src="../../source/js/kendo.selectable.js"></script>
        <script src="../../source/js/kendo.grid.js"></script>
        <script src="../js/people.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">Grid selection</div>
        <!-- description -->
        <div id="example" class="k-content">
            <h3>Grid with multiple row selection enabled</h3>
            <div id="rowSelection" style="width:600px;"></div>

            <h3>Grid with multiple cell selection enabled</h3>
            <div id="cellSelection" style="width:600px;"></div>

            <script>
                $(document).ready(function() {
                    $("#rowSelection").kendoGrid({
                        dataSource: {
                            data: createRandomData(20),
                            pageSize: 5
                        },
                        selectable: "multiple",
                        pageable: true,
                        scrollable: false,
                        navigatable: true,
                        columns: [
                            {
                                field: "FirstName",
                                title: "First Name"
                            },
                            {
                                field: "LastName",
                                title: "Last Name"
                            },
                            {
                                field: "Age"
                            }
                        ]
                    });

                    $("#cellSelection").kendoGrid({
                        dataSource: {
                            data: createRandomData(20),
                            pageSize: 5
                        },
                        selectable: "multiple cell",
                        pageable: true,
                        scrollable: false,
                        navigatable: true,
                        columns: [
                            {
                                field: "FirstName",
                                title: "First Name"
                            },
                            {
                                field: "LastName",
                                title: "Last Name"
                            },
                            {
                                field: "Age",
                                title: "Age"
                            }
                        ]
                    });
                });
            </script>
        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>


